import { onMounted, onUnmounted, ref } from 'vue'
export default function useScroll() {
  const isReatchCallBack = ref(false)
  const clientHeight = ref(0)
  const scrollTop = ref(0)
  const scrollHeight = ref(0)

  // 监听页面滚动
  const scrollLinsterHander = () => {
    clientHeight.value = document.documentElement.clientHeight // 页面高度
    scrollTop.value = document.documentElement.scrollTop // 滚动距离
    scrollHeight.value = document.documentElement.scrollHeight // 底部距离
    // console.log(clientHeight, scrollTop, scrollHeight)
    if (clientHeight.value + scrollTop.value >= scrollHeight.value - 1) {
      //   homeStore.fetchHomeHouseList(currentPage)
      isReatchCallBack.value = true
    }
  }
  // 调用滚动底部方法
  window.addEventListener('scroll', scrollLinsterHander)
  //页面进入调用滚动底部方法
  onMounted(() => {
    window.addEventListener('scroll', scrollLinsterHander)
  })
  //页面离开卸载
  onUnmounted(() => {
    window.removeEventListener('scroll', scrollLinsterHander)
  })

  return { isReatchCallBack, scrollTop }
}
